<template>
  <div class="tree">
    <!-- 查询 -->
    <div class="search">
      <!-- 关键字搜索 -->
      <a-input-search
        class="input"
        placeholder="请输入搜索关键字"
        @search="onSearch"
        v-if="data.name == 'environmental'"
      />
      <a-button class="search-btn" v-if="data.name == 'environmental'" type="primary" size="small" @click="seachUser">企业查询</a-button>
    </div>
    <!-- 树结构 -->
    <div class="content scroll">
      <div class="a-tree">
        <tree-detail
          :treeData="data.list"
          :limit="data.limitNum"
          @onSelect="onSelect"
          @deleteSelect="deleteSelect"
          @onSelectLayer="onSelectLayer"
        ></tree-detail>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapActions} from 'vuex'
  import TreeDetail from './treeDetail.vue'

  export default {
  components: {
    TreeDetail,
  },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      selectedKeys: [],
    }
  },
  methods: {
    ...mapActions(['getTreeList','setParkId']),
    //查询企业
    seachUser() {
      if(this.selectedKeys.length == 0){
        return this.$message.info('请选择园区');
      }
      this.$emit('setSearchLayer', true)
    },
    //搜索
    onSearch(val) {
      this.getTreeList({
        name: this.data.name,
        searchMsg: val,
      })
    },
    //选择
    onSelect(val) {
      this.selectedKeys = val.selectKeys;
      this.setParkId(this.selectedKeys);
      this.$emit('onSelect', {
        type: this.data.name,
        data: val.selectKeys,
      })
    },
    //减少勾选
    deleteSelect(val) {
      this.selectedKeys = val.selectKeys;
      this.setParkId(this.selectedKeys);
      this.$emit('deleteSelect', {
        type: this.data.name,
        data: val.deleteSelectKeys,
      })
    },
    //选择名称展示图层
    onSelectLayer(val) {
      // this.$emit('onSelectLayer', val)
    },
  },
}
</script>
<style lang="less" scoped>
.tree {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  .search {
    width: 224px;
    height: auto;
    margin: 12px auto 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .input {
      width: 100%;
      /deep/ .ant-input {
        padding-right: 0;
        box-sizing: border-box;
        background: transparent;
        color: #fff;
        border-radius: 0;
        border: 1px solid rgba(2, 224, 247, 0.5);
        ::placeholder {
          color: rgba(255, 255, 255, 0.3);
        }
        ::-moz-placeholder {
          color: rgba(255, 255, 255, 0.3);
        }
      }
      /deep/ .anticon {
        color: rgba(255, 255, 255, 0.3);
      }
    }
    .search-btn{
      margin-left: 6px;
      height: 32px;
    }
  }

  /deep/ .ant-input-affix-wrapper .ant-input-suffix {
    top: 55%;
    right: 10px;
  }
  
  .active {
    color: #fff;
  }
  .hide-time {
    width: 100% !important;
    height: 32px;
  }
  .content {
    width: auto;
    height: 480px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 10px;
    margin-right: 10px;
    
  }
}
</style>